<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <nav>
      <ul>
        <li>
          <!-- <a href="#">首页</a> -->
          <router-link to="/home">首页</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'news' }">新闻</router-link>
        </li>
        <li>
          <router-link to="/hot">热门</router-link>
        </li>
      </ul>
      <h1>编程式路由</h1>
      <button @click="toIndex()">去首页</button>
      <button @click="toNews()">去新闻</button>
      <button @click="toGo()">前进</button>
      <button @click="toBack()">后退</button>
      <button @click="replace()">去首页</button>
    </nav>

    <div id="show">
      <!-- 内容展示区域(占位符) -->
      <router-view />
    </div>

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Vue</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <router-link to="/homee" href="#">首页</router-link>
            </li>
            <li>
              <router-link to="/aboutUs" href="#">关于我们</router-link>
            </li>
            <li class="dropdown">
              <router-link
                to="/account"
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
                >账户中心 <span class="caret"></span
              ></router-link>
              <ul class="dropdown-menu">
                <router-link to="/account/pwd" href="#">密码</router-link>
              </ul>
            </li>
            <li><router-link to="/login" href="#">登录</router-link></li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <div class="btn-group">
      <button class="label label-primary" @click="back()">后退</button>
      <button class="label label-primary" @click="go()">前进</button>
      <button class="label label-primary" @click="back2()">跳步-2</button>
      <button class="label label-primary" @click="toindex()">push</button>
      <button class="label label-primary" @click="replace()">replace</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    toIndex() {
      // 字符串
      // this.$router.push("home")
      // 对象
      // this.$router.push({path:"/home"})
      // 命名路由
      // this.$router.push({name:"home"})
      // 携带查询参数
      this.$router.push({
        path: "/home",
        query: { id: 1, username: "zhangsan" },
      });
      console.log("传递的参数是：", this.$route.query.username);
    },
    toNews() {
      this.$router.push({
        name: "news",
        params: { id: 1, username: "zhangsan" },
      });
      console.log("传递的参数是:", this.$route.params.username);
    },
    toGo() {
      this.$router.go(1);
    },
    toBack() {
      this.$router.go(-1);
    },
    replace() {
      // 跟 router.push 很像，唯一的不同就是，它不会像 history 添加新的记录
      this.$router.replace("home");
    },
    back() {
      this.$router.go(-1);
    },
    go() {
      this.$router.go(1);
    },
    back2() {
      this.$router.go(-2);
    },
    toindex() {
      this.$router.push({
        path: "/home",
      });
    },
    replace() {
      this.$router.replace("/home");
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
#show {
  background-color: #eeeeee;
  width: 100%;
  padding-top: 50px;
  padding-right: 30px;
}
#show h1 {
  margin-left: 40px;
}

.navbar-default .navbar-nav > .active > a {
  background: none;
}

.inner {
  border: none;
}

.label {
  width: 60px;
  height: 40px;
  border: none;
}
.navbar-default .navbar-nav > .active > a {
  background: none;
}
</style>

